<template>
  <div class="orderDetailContainer">
    <div class='card'>
      <scroll-view  style="height:100%" :scroll-y="true"> 
        <div class='device-card' v-if='alarm'>
            <div class='card-title' >
                <img src='/static/images/user_icon_mywo@3x.png'/>
                报警详情
            </div>
            <div class='card-item'><div class='title'>项目名称：</div><div class='value'>{{alarm.projectName}}</div></div>
            <div class='card-item'><div class='title'>设备系统：</div><div class='value'>{{alarm.systemName}}</div></div>
            <div class='card-item'><div class='title'>设备位置：</div><div class='value'>{{alarm.devicePos}}</div></div>
            <div class='card-item'><div class='title'>设备编号：</div><div class='value'>{{alarm.deviceNum}}</div></div>
            <div class='card-item'><div class='title'>报警点：</div><div class='value'>{{alarm.tagName}}</div></div>
            <div class='card-item'><div class='title'>初次报警时间：</div><div class='value'>{{alarm.alarmStr}}</div></div>
            <div class='card-item'><div class='title'>最新报警时间：</div><div class='value'>{{alarm.lastStr}}</div></div>
            <div class='card-item'><div class='title'>报警次数：</div><div class='value'>{{alarm.times}}</div></div>
            <div class='card-item'><div class='title'>报警值：</div><div class='value'>{{alarm.pointValue}}</div></div>
            <div class='card-item'><div class='title'>报警状态：</div><div class='value'>{{alarm.status==''?'-':alarm.status}}</div></div>
            <div class='card-item'><div class='title'>报警描述：</div><div class='value'>{{alarm.alarmDesc}}</div></div>
        </div>
      </scroll-view>
    </div>  
  </div>
</template>

<script type="text/javascript">
import { mapState} from 'vuex';
import moment from 'moment';
export default {
  data() {
    return {
        alarm:null
    }
  },
  onShow() {
      var query = this.$root.$mp.query;
      this.alarm = JSON.parse(query.alarm);
      this.alarm.alarmStr = moment(this.alarm.alarmTime).format('YYYY/MM/DD HH:mm')
      this.alarm.lastStr = moment(this.alarm.lastTime).format('YYYY/MM/DD HH:mm')
  },
  methods:{

  },
  computed:{
    ...mapState(['userInfo'])
  }
}
</script>

<style lang='less'>
page{
    background:#eef7fd;
    height:100%;
}
::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
}
.orderDetailContainer{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    .card{
        height: 50rpx;
        flex:1;
        padding: 20rpx; 
    }
    .device-card{
        border:2rpx solid #e6e6e6;
        border-radius: 8rpx;
        background: #fff;
        color:#999999;
        overflow: hidden;
        .value{
            color:#338ed4;
        }
        .card-title{
            height: 80rpx;
            line-height: 80rpx;
            padding: 0 20rpx;
            border-bottom:1px solid #e6e6e6;
            &:last-child{
                border-bottom:none
            }
            &.deal-info{
                display: flex;
                justify-content: space-between;
            }
            img{
                width: 36rpx;
                height: 36rpx;
                margin: 10rpx;
                margin-top:0rpx;
                vertical-align: middle; 
            }
        }
        .card-item{
            height: 80rpx;
            line-height: 80rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom:2rpx solid #e6e6e6;
            margin: 0 20rpx;
            font-size:30rpx;
            .title{
                color: #a4a4a4;
            }
            &:last-child{
                border-bottom:none
            }
        }
    }
}    
</style>
